<div class="form-group">
    <div class="col-sm-12">
        <input type="file" id="upload_picture_cover"><span style="margin-top: -26px;margin-left: 205px;display: block;color: #959595">图片最大不能超过8M</span>
        <input type="hidden" name="cover_id" id="cover_id_cover" value=""/>
        <div class="col-sm-8 upload-img-box" style="margin-top: 10px;margin-left:-15px;min-height: 100px;overflow: hidden">
        </div>
        <div class="col-sm-4" style="margin-left:-15px;">
            <div class=" upload-img-box1" style="margin-top: 10px;border: 1px solid #959595;min-height: 227px;">
            </div>
            <div style="text-align: center;margin-top: 10px;"><a href="javascript:void(0);" onclick="doCrop();">预览</a></div>
        </div>

        <button class="btn btn-primary pull-right button_change" id="sure_crop" style="margin-top: 20px;">确定上传</button>
    </div>

</div>
<!--<script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>-->
<script>
    var crop;
    $("#upload_picture_cover").uploadify({
        "height": 30,
        "swf": "__STATIC__/uploadify/uploadify.swf",
        "fileObjName": "download",
        "buttonText": "上传图片",
        "buttonClass": "uploadcover",
        "uploader": "{:U('Home/File/uploadPicture',array('session_id'=>session_id()))}",
        "width": 200,
        'removeTimeout': 1,
        'fileTypeExts': '*.jpg; *.png; *.gif;',
        "onUploadSuccess": uploadPicturecover,
        'overrideEvents': ['onUploadProgress', 'onUploadComplete', 'onUploadStart', 'onSelect'],
        'onFallback': function () {
            alert('未检测到兼容版本的Flash.');
        }, 'onUploadProgress': function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
            $("#cover_id_cover").parent().find('.upload-img-box').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');
        }, 'onUploadComplete': function (file) {
            //alert('The file ' + file.name + ' finished processing.');
        }, 'onUploadStart': function (file) {
            $('.upload-img-box').html(
                    '<div class="upload-pre-item">上传中...</div>'
            );
            //alert('Starting to upload ' + file.name);
        }, 'onQueueComplete': function (queueData) {
            // alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
        }
    });
    function uploadPicturecover(file, data) {
        var data = $.parseJSON(data);
        var src = '';
        if (data.status) {
            $("#cover_id_cover").val(data.id);
            src = data.url || data.path
            $('.upload-img-box').html(
                    '<div class="sss"><img  id="uploaded_image" src="' + src + '"/></div>'
            );
            $('#uploaded_image').Jcrop({
                aspectRatio: 1,
                boxWidth:420,
                onSelect: updateCoordinate,
                minSize: [100, 100],
                setSelect: [0, 0, 300, 300],
                onDblClick: doCrop
            }, function () {
                jcrop_api = this;
                crop = jcrop_api.tellScaled();
            });
        } else {
            toast.error('图片上传失败。', '温馨提示');
        }
    }

</script>

<style>
    .sss img{width: 100%}
</style>
<link rel="stylesheet" type="text/css" href="__STATIC__/jcrop/jquery.Jcrop.css"/>
<script src="__STATIC__/jcrop/jquery.Jcrop.js"></script>
<script src="__STATIC__/browser/jquery.browser.js"></script>
<script>

    function updateCoordinate(c) {
        crop = c;

    }
    function doCrop(c) {
        //检查是否已经裁剪过
        if (crop.w == undefined || crop.w == 0) {
            alert('请先选出图片中需要的部分');
            return;
        }

        var picture_id = $("#cover_id_cover").val();
        //提交到服务器
        var url = "{:addons_url('Crop://Crop/doCrop')}";
        var imageWidth = $('#uploaded_image').width();
        var imageHeight = $('#uploaded_image').height();
        var crop2 = crop.x / imageWidth + ',' + crop.y / imageHeight + ',' + crop.w / imageWidth + ',' + crop.h / imageHeight;
        $.post(url, {picture_id: picture_id, crop: crop2}, function (a) {
            if (a.status) {
                $('.upload-img-box1').html(
                        '<div class=""><img style="width: 100%" id="confirm_path" src="' + a.info.path + '"/></div>'
                );

            } else {

            }
        });

    }
    $(function () {
        $('#sure_crop').click(function () {
            var url = "{:addons_url('Crop://Crop/confirm')}";
            $.post(url, {path: $('#confirm_path').attr('src')}, function (a) {
                if (a.status) {
                    toast.success('上传成功');
                    upload_crop.cropSuccess(a);
                   $('.mfp-close').click();
                }
                else{
                    toast.error('上传失败,请先预览！');
                }
            });
        })
    })
</script>
